<template>
  <bg />
  <div class="login-container">
    <div class="left-panel">
      <h1>战例场景管理平台</h1>
    </div>
    <div class="right-panel">
      <div class="login-form">
        <h2>登录</h2>
        <el-form :model="form" @submit.prevent="handleLogin">
          <el-form-item label="用户名">
            <IInput
              id="inputDemo"
              placeholder="请输入用户名"
              container-class="w-full max-w-sm"
              v-model="form.username"
            ></IInput>
          </el-form-item>
          <el-form-item label="密码&nbsp&nbsp&nbsp">
            <IInput
              id="inputDemo"
              placeholder="请输入密码"
              container-class="w-full max-w-sm"
              v-model="form.password"
              type="password"
            ></IInput>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin" style="width: 100%">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import bg from '@/components/UI/bg.vue'
import { ref, onMounted } from 'vue'
import IInput from '@/components/UI/Input.vue'

const router = useRouter()
const form = reactive({
  username: '',
  password: '',
})

function handleLogin() {
  if (form.username && form.password) {

    // 示例逻辑：假设任意输入都算成功
    localStorage.setItem('token', 'mock-token')
    ElMessage.success('登录成功')
    router.push('/')
  } else {
    console.log(form.username, form.password)
    ElMessage.error('请输入用户名和密码')
  }
}
</script>

<style scoped>
.login-container {
  position: absolute;
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* 左侧标题大一些 */
.left-panel {
  flex: 1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: end;
  background: transparent;
}

.left-panel h1 {
  font-size: 65px; /* 更大字体 */
  font-weight: bold;
  letter-spacing: 15px;
}

/* 右侧垂直居中 */
.right-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form {
  width: 320px;
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* 调整表单标题 */
.login-form h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
}

/* 修改按钮为黑色 */
.login-form .el-button {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

.login-form .el-button:hover {
  background-color: #333;
  border-color: #333;
}
</style>
